<template>
  <div class="notification-container">
    <transition-group name="notification">
      <div 
        v-for="notification in taskStore.notifications" 
        :key="notification.id"
        :class="['notification', notification.type, 'fade-in']"
      >
        <i :class="getIconClass(notification.type)"></i>
        <div class="notification-content">
          <div class="notification-title">{{ notification.title }}</div>
          <div class="notification-message">{{ notification.message }}</div>
        </div>
        <div class="notification-close" @click="closeNotification(notification.id)">
          <i class="bi bi-x"></i>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup lang="ts">
import { useTaskStore } from '@/stores/taskStore';

const taskStore = useTaskStore();

function getIconClass(type: string): string {
  switch (type) {
    case 'success': return 'bi bi-check-circle';
    case 'error': return 'bi bi-exclamation-triangle';
    case 'warning': return 'bi bi-exclamation-circle';
    default: return 'bi bi-info-circle';
  }
}

function closeNotification(id: string) {
  taskStore.removeNotification(id);
}
</script>

<style scoped>
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(50px);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
</style>